<template>
  <div v-if="!getIsPhone" class="member-management">
    <account-header></account-header>
    <div class="main-wrapper">
      <div class="main box-shadow">
        <account-tab 
          :activeIndex="activeIndex"
          :tabs="tabs"
          @click="updateActiveIndex"
        >
          <div class="button-selected add-member hover-style" @click="addMember">
            <span class="icon">
              <i class="iconfont iconacbar_tianjia"></i>
            </span>
            <span>添加会员</span>
          </div>
        </account-tab>
        <component :is="currentComponent"></component>
        <!-- <member-manage></member-manage> -->
      </div>
    </div>
    <bc-modal v-show="showAddMember">
      <add-members @close="hideAddMember" @click="updateMemberInfo"></add-members>
    </bc-modal>
  </div>
  <div class="member-management" v-else>
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        <div class="center-context">
          会员管理
        </div>
      </template>
      <template v-slot:right>
        <input-search></input-search>
      </template>
    </header-template-phone>
    <div class="members-inner">
      <div class="general-info">
        <bill-board>
          <div class="billboard-content">
            <div class="item border-right">
              <div class="title">直属会员</div>
              <div class="statistics">
              <span>{{getUserInfo.directMembers}}</span>
              <span class="extra">人</span>
              </div>
            </div>
            <div class="item border-right">
              <div class="title">全部会员</div>
              <div class="statistics">
              <span>{{getUserInfo.totalMembers}}</span>
              <span class="extra">人</span>
              </div>
            </div>
            <div class="item">
              <div class="title">团队余额</div>
              <div class="balance statistics">
                <span>{{getUserInfo.groupBalance}}</span>
                <span class="extra">.00</span>
              </div>
            </div>
          </div>
        </bill-board>
      </div>
      <div class='team-info'>
        <div class="title">
          直属会员
        </div>
        <div class="members">
          <member-info 
            v-for="(item, index) in members" 
            :key="index" 
            :item="item"
            :showUser="userId"
            @click="checkMemberDetail"
            @showChild="isShow"
            >
          </member-info>
        </div>
      </div>
    </div>
    <div class="member-detail-wrapper layer-style" v-show="showMemberDetails">
      <member-detail 
        :item="memberDetails"
        @click="hideMemberDetail"
        >
      </member-detail>
    </div>
  </div>
</template>
<script>
import AccountHeader from '@/components/header/account-header/account-header'
import AccountTab from '@/pages/my-account/components/account-tab'
import MemberManage from './components/member-manage'
import RecommendLink from './components/recommend-link'
import RecordsSelector from '@/components/records-selector/records-selector'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import BillBoard from '@/components/base/bill-board/bill-board'
import OrderSpecification from '@/components/base/order-specification/order-specification'
import SliderNav from '@/components/slider-nav/slider-nav'
import LoadMore from '@/components/base/load-more/load-more'
import HeaderBack from '@/components/base/header-back/header-back'
import MemberInfo from './components/member-info'
import InputSearch from '@/components/input-search/input-search'
import MemberDetail from './components/member-detail'
import BcModal from '@/components/base/bc-modal/bc-modal'
import AddMembers from '@/pages/add-members/add-members'

import { findIndexById, formatDateNoYear } from '@/assets/js/util'
import { mapGetters } from 'vuex'
export default {
  components: {
    AccountHeader,
    AccountTab,
    HeaderTemplatePhone,
    BillBoard,
    OrderSpecification,
    RecordsSelector,
    SliderNav,
    LoadMore,
    MemberManage,
    RecommendLink,
    HeaderBack,
    MemberInfo,
    InputSearch,
    MemberDetail,
    BcModal,
    AddMembers
  },
  data() {
    return {
      allOrders: [
        {
          dateNo: '819047',
          lotteryState: 0,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() -  3600 * 1000,
          orderId: 'DD12967FT1',
          lotteryType: '香港六合彩-特码色波',
          amount: 100,
          bonus: 280,
          refundRate: '2.5%',
          numbers: '红波'
        },
        {
          dateNo: '819047',
          lotteryState: 1,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() - 24 * 3600 * 1000,
          orderId: 'DD12967FT2',
          lotteryType: '重庆时时彩-五星直选复式',
          amount: 700,
          bonus: 2000,
          refundRate: '2.5%',
          numbers: '红波,绿波,蓝波'
        },
        {
          dateNo: '819047',
          lotteryState: 2,
          drawTime: new Date().getTime() +  3600 * 1000,
          orderTime: new Date().getTime() - 24 * 3600 * 1000,
          orderId: 'DD12967FT3',
          lotteryType: '北京赛车-特码',
          amount: 1000,
          bonus: 2800,
          refundRate: '2.5%',
          numbers: '12357,27891,33334,77778,999876'
        },
      ],
      tablist: [
        {
          id: 1,
          tabname: '全部'
        },
        {
          id: 2,
          tabname: '未开奖'
        },
        {
          id: 3,
          tabname: '已中奖'
        },
        {
          id: 4,
          tabname: '未中奖'
        },
        {
          id: 5,
          tabname: '撤单'
        },
        {
          id: 6,
          tabname: '系统撤单'
        },
        {
          id: 7,
          tabname: '其他'
        },
      ],
      // pc
      tabs: [
        {
          id: 1,
          name: '会员管理',
          component:'MemberManage'
        },
        {
          id: 2,
          name: '推广链接',
          component: 'RecommendLink'
        }
      ],
      // pc头部tab
      activeIndex: 0,
      page: 0,
      // 手机
      activeTabIndex: 0,
      // 用户id
      userId: '',
      showMemberDetails: false,
      showAddMember: false 
    }
  },
  methods:{
    // pc头部tab
    updateActiveIndex(index) {
      this.activeIndex = index
    },
    formatDate(row, column, cellValue) {
      return formatDateNoYear(cellValue)
    },
    handleLoadMore() {
      this.page++
    },
    checkMemberDetail(id) {
      this.showMemberDetails = true
      this.userId = id 
    },
    hideMemberDetail() {
      this.showMemberDetails = false
    },
    addMember() {
      this.showAddMember = true 
    },
    hideAddMember() {
      this.showAddMember = false 
    },
    updateMemberInfo(member) {
      console.log(member)
      this.showAddMember = false 
    },
    isShow(id) {
      this.userId = id
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone', 'getUserInfo']),
    currentComponent() {
      return this.tabs[this.activeIndex].component 
    },
    members() {
      return [this.getUserInfo, ...this.getUserInfo.members]
    },
    memberDetails() {
      let ret = {}
      this.members.forEach(member => {
        if (member.userid == this.userId) {
          ret = member
        }
      })
      return ret
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px) 
    .billboard-adjust >>> .content 
      margin-bottom 0 !important
    .billboard-adjust >>> .bg-bar 
      width 101% !important
    .billboard-adjust  
      margin 0 12px
    .member-management 
      width 100%
      .main-wrapper 
        box-sizing border-box 
        padding-top 128px
        .main 
          box-sizing border-box 
          width 1200px 
          margin 0 auto
          margin-top 10px
          background #fff
          margin-top 10px 
          border-radius 3px
          .add-member 
            width 96px
            height 30px
            display flex 
            align-items center
            justify-content center
            .icon 
              .iconfont 
                font-size 24px 
                color #fff
          .pickers 
            // height 48px
            display flex
            align-items center
            box-sizing border-box 
            padding 10px 20px 0 20px
            background #fff
            .tab-switch 
              margin-right 20px
            .dropdown-picker 
              margin-right 10px
            .search-wrapper 
              flex 1
              display flex 
              justify-content flex-end
            .search-wrapper >>> .dropdown-picker 
              width 190px 
              margin-right 0
              .lottery-name 
                width 155px 
                input 
                  width 155px 
                  box-sizing border-box 
                  padding-left 10px 
                  outline none
                  background none
          .account-info 
            width 100%
            padding 12px 25px
            box-sizing border-box
            background #faf8f8
            align-items center
            .billboard-content 
              width 100% 
              display flex
              height 45px
              background #fff
              padding 15px 0
              .item 
                width 33.33% 
                display flex 
                flex-direction column 
                justify-content center
                box-sizing border-box 
                .title 
                  margin-bottom 10px
                  color $color-sub-grey
                .statistics
                  display inline-block
                  span 
                    font-size 15px
                  .extra 
                    display inline-block
                    font-size 10px
                  &.amount 
                    color $color-primary-green
                  &.bonus
                    color $color-theme-red
                  &.profit 
                    color $color-theme-red
          .orders  
            .load-more 
              height 60px 
              line-height 60px 
              text-align center
          .orders >>> .el-table 
            tr 
              height 40px 
              line-height 40px
              padding-top 0
            th 
              padding 0
              background #e7e0dd
              color $color-theme-dark
              font-weight 700
              .cell
                padding-left 20px
            td 
              padding 0
              height 40px
              line-height 40px
              // &.el-table_2_column_12
              //   color $color-lose-money
              // &.el-table_2_column_13  
              //   color $color-theme-red
              .cell 
                padding-left 20px
                height 21px
                button 
                  color $color-sub-grey
                  padding 0
  @media screen and (max-width 750px)
    .member-management
      .center-context 
        font-size 15px
        color #fff6d6
      .members-inner
        box-sizing border-box 
        padding-top 48px
        .general-info 
          width 100%
          height 85px
          // background-color #ccc
          padding 10px 10px 5px 10px
          box-sizing border-box
          position relative
          .billboard-content 
            width 100% 
            display flex
            height 70px
            background #fff
            .item 
              width 33.33% 
              box-sizing border-box 
              display flex 
              flex-direction column 
              justify-content center
              .title 
                margin-bottom 10px
                color $color-sub-grey
              .statistics
                display inline-block
                &.balance
                  color $color-theme-red
                span 
                  font-size 15px
                .extra 
                  display inline-block
                  font-size 10px
        .team-info 
          box-sizing border-box 
          padding 0 10px
          .title 
            height 45px 
            line-height 45px 
            font-size 15px 
            font-weight 700   
          .members 
            border-radius 3px 
            overflow hidden
            border 1px solid $color-divide-line
            
        
          
</style>